<template>
    <view class="content">
        <view class="post-head">
            <view class="post-title">{{article.title}}</view>
            <view>
                <view>
                    <text>作者:{{article.username}}</text>
                </view>
                <view class="post-time">
                    <u-icon name="clock" size="12"></u-icon>
                    <text class="time">{{article.pub_date}}</text>
                </view>
            </view>
        </view>
        <u-line dashed></u-line>
        <view class="post-body">
            <image :src='cover_img' style="width: 100%;height: 500rpx;border-radius: 10rpx;margin-bottom: 25rpx"
                mode='aspectFill'></image>
            <mp-html :tag-style="tag_style" :content="article.content" :container-style="container_style"
                selectable="true"> 内容加载ing...</mp-html>
        </view>
        <u-line dashed></u-line>
    </view>
</template>

<script>
    import {
        productArticle
    } from '@/api/index/index.js'
    import MpHtml from "../../../components/mp-html/mp-html";

    export default {
        name: 'Article',
        components: {
            MpHtml
        },
        data() {
            return {
                iconStyle: {
                    fontSize: '28rpx',
                    color: '#dd524d'
                },
                customStyles: {
                    backgroundColor: 'rgba(246,246,246,0.5)',
                },
                // 文本框解析
                tag_style: {
                    h1: 'line-height: 50px;font-size:16px;',
                    h2: 'line-height: 50px;font-size:16px',
                    h3: 'line-height: 50px;font-size:16px',
                    h4: 'line-height: 50px;font-size:16px',
                },
                container_style: 'font-size:14px;line-height: 26px;overflow-x: hidden;',
                cover_img: '../../../static/imgs/sample2.jpg',
                Id: '',
                article: {},
            }
        },
        onLoad(option) {
            this.getArticleDetail(option.Id);
        },
        methods: {
            getArticleDetail(artId) {
                productArticle(artId).then(res => {
                    this.article = res.data.productArticle || {};
                    // 正则添加class
                    this.article.content = res.data.productArticle.content
                        .replace(/<h1([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h1')
                        .replace(/<h1([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h1')
                        .replace(/<h1>/ig, '<h1 class="h1">')

                        .replace(/<h2([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h2')
                        .replace(/<h2([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h2')
                        .replace(/<h2>/ig, '<h2 class="h2">')

                        .replace(/<h3([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h3')
                        .replace(/<h3([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h3')
                        .replace(/<h3>/ig, '<h3 class="h3">')

                        .replace(/<h4([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h4')
                        .replace(/<h4([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h4')
                        .replace(/<h4>/ig, '<h4 class="h4">')

                        .replace(/<h5([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h5')
                        .replace(/<h5([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h5')
                        .replace(/<h5>/ig, '<h5 class="h4">')

                        .replace(/<h6([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h6')
                        .replace(/<h6([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h6')
                        .replace(/<h6>/ig, '<h6 class="h6">')

                        .replace(/<code([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<code')
                        .replace(/<code([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<code')
                        .replace(/<code>/ig, '<code class="language-css">')
                })
                uni.setNavigationBarTitle({
                    title: this.article.title
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 100vw;
        padding: 20rpx;
        background-color: #fff;

        .post-head {
            width: 100%;
            margin-bottom: 15rpx;
            padding-bottom: 20rpx;

            .post-title {
                font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace;
                font-weight: bold;
                font-size: 22px;
                padding-bottom: 14rpx;
            }
        }

        .post-time {
            padding-top: 15rpx;
            color: #999;
            font-size: 12px;
            display: flex;
            justify-content: flex-start;
            align-content: center;

            .time {
                padding-left: 8rpx;
            }
        }

        .post-body {
            width: 100%;
            padding-top: 20px;
            font-family: miranafont, "Hiragino Sans GB", STXihei, "Microsoft YaHei", SimSun, sans-serif;
        }

        .post-desc {
            display: flex;
            justify-content: flex-start;
            padding: 30rpx 10rpx;

            .post-time {
                padding-right: 20rpx;
            }
        }
    }
</style>
